<template>
  <div class='container app-container'>
    <div class="el-card">
      <div class="el-card__body">
        <!-- 头部表单 -->
        <el-row
          type="flex"
          class="row-bg"
          justify="space-between"
        >
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item label="关键字">
              <el-input
                v-model="formInline.keyword"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="formInline.state"
                placeholder="请选择"
              >
                <el-option
                  label="已禁用"
                  value=0
                ></el-option>
                <el-option
                  label="已启用"
                  value=1
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="ondele">清除</el-button>
              <el-button
                type="primary"
                @click="onSubmit"
              >搜索</el-button>
            </el-form-item>
          </el-form>
          <el-button
            type="success"
            size="small"
            class="addedButton"
            icon="el-icon-edit"
            @click="artAdded"
          >新增技巧</el-button>
        </el-row>
        <!-- 提示信息 -->
        <el-alert
          class="tips"
          :title="'数据一共' + count + '条'"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>
        <!-- 主要内容 -->
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          >
          </el-table-column>

          <!-- </el-table-column> -->
          <el-table-column
            label="文章标题"
            width="395"
          >
            <template slot-scope="scope">
              <span>{{scope.row.title}}</span>
              <i
                @click="video(scope.row.videoURL)"
                v-if="scope.row.videoURL"
                class="el-icon-film media"
              ></i>
            </template>
          </el-table-column>
          <el-table-column
            prop="visits"
            label="阅读数"
            width="300"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="录入人"
            width="300"
          >
          </el-table-column>
          <el-table-column
            label="录入时间"
            width="300"
          >
            <template slot-scope="scope">
              <span>{{scope.row.createTime | timeDeta}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.state === 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row.id)"
                type="text"
                size="small"
              >预览</el-button>
              <el-button
                type="text"
                size="small"
                v-if="scope.row.state === 1"
                @click="statusDisabled(scope.row.id, 1)"
              >禁用</el-button>
              <el-button
                v-else
                type="text"
                size="small"
                @click="statusDisabled(scope.row.id , 0)"
              >启用</el-button>
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.state === 1"
                @click="modification(scope.row.id)"
              >修改</el-button>
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.state === 1"
                @click="delece(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- total共有多少条数据 -->

        <el-row
          type="flex"
          class="row-bg paging"
          justify="end"
        >
          <el-pagination
            background
            layout="prev, pager, next,sizes,jumper"
            :total="20"
            :page-sizes="[1,2,5,8,10]"
            :page-size="pagesize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-row>
      </div>
      <!-- 视频弹出框 -->
      <el-dialog
        :visible.sync="dialogVisible"
        title="视频"
        :before-close="handleClose"
      >
        <video
          autoplay
          width="100%"
          height="100%"
          id="media"
          :src="videoURL"
          referrerPolicy="no-referrer"
          controls
        ></video>
      </el-dialog>
      <!-- 文章预览弹窗 -->
      <el-dialog
        title="预览文章"
        :visible.sync="textOpen"
        :before-close="textClose"
        width="800px"
        class="text"
      >
        <h2>{{article.title}}</h2>
        <span>{{article.createTime | timeDeta}}</span>
        <span>超级管理员</span>
        <i class="el-icon-view eyes"></i>
        <span>{{article.visits}}</span>
        <div
          class="major"
          v-html="article.articleBody"
        ></div>
      </el-dialog>
      <!-- 新增和修改组件 -->
      <el-dialog
        :title="titleArticle"
        :visible.sync="testAdd"
        :before-close="butCancel"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="文章标题:"
            prop="title"
          >
            <el-input
              v-model="ruleForm.title"
              placeholder="请输入文章标题"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="文章内容:"
            prop="articleBody"
          >
            <quill-editor
              style="height: 250px;"
              :options="play"
              v-model="ruleForm.articleBody"
            ></quill-editor>
          </el-form-item>
          <el-form-item
            label="视频地址:"
            prop="videoURL"
            style="margin-top: 110px;"
          >
            <el-input
              v-model="ruleForm.videoURL"
              placeholder="请输入视频地址"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="butCancel('ruleForm')">取消</el-button>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
            >立即创建</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 删除提示框 -->
      <el-dialog
        title="是否确认删除"
        :visible.sync="deletecole"
        width="30%"
        :before-close="handle"
      >
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="handle">取 消</el-button>
          <el-button
            type="primary"
            @click="deleteArticle"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import VueQuillEditor from 'vue-quill-editor'
import Vue from 'vue'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { articlesList, articleDetails, articleStatus, articleAdd, articleput, articleDelete } from '@/api/articles'
Vue.use(VueQuillEditor)
export default {
  filters: {
    timeDeta (val) {
      return moment(val).format('YYYY-MM-DD   h:mm:ss ')
    }
  },
  // 组件名称
  name: 'articles',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [{
          required: true, message: '请输入文章内容', trigger: 'blur'
        }]
      },
      formInline: { // 头部表单数据
        keyword: '',
        state: ''
      },
      tableData: [], // 主要内容数据
      page: 1, // 当前页数
      pagesize: 10, // 页面条数
      count: 0, // 总共条数
      dialogVisible: false, // 视频弹窗的显示与否
      videoURL: '', // 视频地址的存放
      article: {}, // 存放文章详情
      textOpen: false, // 控制文章详情的弹层
      testAdd: false, // 新增和修改组件
      titleArticle: '修改文章',
      ruleForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      play: {
        placeholder: ''
      },
      deletecole: false, // 删除提示框
      deleteId: ''// 存放删除的id

    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成,属性已绑定,但DOM还未生成,el属性还不存在
  */
  created () {
    this.articlesList()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 点击清除按钮执行
    ondele () {
      this.formInline = { // 头部表单数据
        keyword: '',
        state: null
      }
    },
    // 点击搜索按钮执行
    onSubmit () {
      this.articlesList(
        {
          keyword: this.formInline.keyword,
          state: this.formInline.state
        })
    },
    // 选择页面显示条数执行
    handleSizeChange (val) {
      this.pagesize = val
      this.articlesList()
    },
    // 点击页码和分页执行
    handleCurrentChange (val) {
      this.page = val
      this.articlesList()
    },
    // 页面渲染时调用，获取页面列表信息的方法
    async articlesList (val) {
      const { data } = await articlesList(
        {
          page: this.page,
          pagesize: this.pagesize,
          ...val
        })
      this.count = data.counts
      this.tableData = data.items
      console.log(data)
    },
    // 关闭弹层调用
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.videoURL = ''
          done()// 关闭弹层
        })
        .catch(_ => { })
    },
    // 关闭预览文章的组件
    textClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.articleBody = ''
          done()// 关闭弹层
        })
        .catch(_ => { })
    },
    // 点击视频图标调用
    video (val) {
      this.dialogVisible = true
      this.videoURL = val
    },
    // 详情
    async handleClick (val) {
      try {
        const { data } = await articleDetails(val)
        this.article = data
        this.textOpen = true
        this.$message({
          message: '获取成功',
          type: 'success'
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 禁用和启用按钮
    async statusDisabled (val, a) {
      console.log(1)
      await articleStatus(val, a)
      this.articlesList()
    },
    // 修改和新增按钮触发
    artAdded () {
      this.titleArticle = this.ruleForm.id ? '修改文章' : '新增文章'
      this.testAdd = true
    },
    // 确认按钮触发
    submitForm (val) {
      this.$refs.ruleForm.validate().then(async () => {
        try {
          if (!this.ruleForm.id) {
            // 新增
            await articleAdd(this.ruleForm)
          } else {
            await articleput(this.ruleForm)
          }
          this.articlesList()
          this.ruleForm = {
            title: '',
            articleBody: '',
            videoURL: ''
          }
          this.testAdd = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } catch (error) {
          console.log(error)
        }
      })
    },
    // 增加和修改的取消
    butCancel () {
      this.$refs.ruleForm.resetFields()
      this.testAdd = false
      this.ruleForm = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },
    // 修改按钮触发
    async modification (val) {
      try {
        const { data } = await articleDetails(val)
        this.ruleForm = data
        this.testAdd = true
      } catch {
        console.log()
      }
    },
    delece (val) {
      this.deletecole = true
      this.deleteId = val
    },
    // 删除的确认按钮触发
    async deleteArticle () {
      try {
        await articleDelete(this.deleteId)
        this.articlesList()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.deletecole = false
        this.deleteId = ''
      } catch (error) {
        console.log(error)
      }
    },
    handle () {
      this.deletecole = false
      this.deleteId = ''
    }
  }
}
</script>

<style scoped lang='scss'>
@import url("/assets/lib/tinymce/tinymce.min.js");
@import url("/assets/lib/tinymce/tinymce_setup.js");
.addedButton {
  margin: 0px;
  padding: 0px;
  height: 36px;
  width: 97px;
}
.tips {
  margin-bottom: 15px;
}
.paging {
  margin-top: 20px;
}
.media {
  color: #4245ff;
  margin-left: 10px;
}
.text {
  padding: 40px;
}
.major {
  background: #f5f5f5;
}
.eyes {
  margin-left: 5px;
  margin-right: 5px;
}
</style>
